<template>
  <img :src="musicList.al.picUrl" alt="" class="bgimg" />
  <!-- 头部部分 -->
  <div class="detailTop">
    <div class="detailTopLeft">
      <svg class="icon liebiao" aria-hidden="true" @click="backHome()">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <div class="leftMarquee">
        <Vue3Marquee style="color: #fff">
          {{ musicList.al.name }}
        </Vue3Marquee>
        <span v-for="item in musicList.ar" :key="item">
          {{ item.name }}
        </span>
        <svg class="icon liebiao" aria-hidden="true">
          <use xlink:href="#icon-youjiantou1"></use>
        </svg>
      </div>
    </div>
    <div class="detailTopRight">
      <svg class="icon liebiao" aria-hidden="true">
        <use xlink:href="#icon-fenxiang"></use>
      </svg>
    </div>
  </div>
  <!-- 中间部分 -->
  <div class="detailContent" v-show="!isLyricShow">
    <img src="@/assets/needle-ab.png" alt="" class="img_needle" :class="{img_needle_active:!isbtnShow}"/>
    <img src="@/assets/cd.png" alt="" class="img_cd" />
    <img :src="musicList.al.picUrl" alt="" class="img_ar" @click="(isLyricShow = true)" :class="{img_ar_active:!isbtnShow,img_ar_paused:isbtnShow}"/>
  </div>
  <div class="musicLyric" ref="musicLyric" v-show="isLyricShow">
    <p v-for="item in lyric" :key="item" @click="(isLyricShow = false)" :class="{active:(currentTime*1000 >= item.time && currentTime*1000 < item.next)}">
      {{item.lrc}}
    </p>
  </div>
  <!-- 底部部分 -->
  <div class="detailFooter">
    <div class="footerTop">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-aixin"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-iconfontzhizuobiaozhun023146"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-yinlechangpian"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-iconfontzhizuobiaozhun023110"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-liebiao-"></use>
      </svg>
    </div>
    <div class="footerContent">
      <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05">
    </div>
    <div class="footer">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xunhuan"></use>
      </svg>
      <svg class="icon" aria-hidden="true"  @click="goPlay(-1)">
        <use xlink:href="#icon-shangyishoushangyige"></use>
      </svg>
      <svg class="icon bofang" aria-hidden="true" @click="play()" v-if="isbtnShow">
        <use xlink:href="#icon-bofang1"></use>
      </svg>
      <svg class="icon bofang" aria-hidden="true" @click="play()" v-else>
        <use xlink:href="#icon-zanting"></use>
      </svg>
      <svg class="icon" aria-hidden="true"  @click="goPlay(1)">
        <use xlink:href="#icon-xiayigexiayishou"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-zu"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import { Vue3Marquee } from "vue3-marquee";
import "vue3-marquee/dist/style.css";
import { mapMutations,mapState } from "vuex";
export default {
  data(){
    return {
      isLyricShow: false
    }
  },
  computed:{
    ...mapState(['lyricList','currentTime','playListIndex','playList','duration']),
    lyric(){
      let arr;
      if(this.lyricList.lyric){
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item,i)=>{
          let min = item.slice(1,3)
          let sec = item.slice(4,6)
          let mill = item.slice(7,10)
          let lrc = item.slice(11,item.length)
          let time = parseInt(min)*60*1000 + parseInt(sec)*1000 + parseInt(mill)
          if(isNaN(Number(mill))){
            mill = item.slice(7,9)
            lrc = item.slice(10,item.length)
            // 如果毫秒值更改则重新计算时间
            time = parseInt(min)*60*1000 + parseInt(sec)*1000 + parseInt(mill)
          }
          // console.log(min,sec,Number(mill),lrc);
          return{min,sec,mill,lrc,time}
        })
        arr.forEach((item,i) => {
          // 如果歌词条目是最后一句或者下一句的time是NaN则直接延长下一句歌词显示的时间
          if (i === arr.length - 1 || isNaN(arr[i+1].time)) {
            item.next = 1000000
          }else {
            item.next = arr[i+1].time
          }
        });
      }
      console.log(arr);
      return arr
    }
  },
  components: {
    Vue3Marquee,
  },
  watch:{
    currentTime(newValue){
      let p = document.querySelector('p.active')
      console.log([p]);
      if(p){
        if (p.offsetTop > 250) {
        this.$refs.musicLyric.scrollTop = p.offsetTop - 250
        }
      }
      if(newValue == this.duration){
        if (this.playListIndex == this.playList.length - 1) {
          // 如果当前播放歌曲是最后一首则跳转到第一首，并自动播放
          this.updatePlayListIndex(0)
          // 手动调用一次播放方法
          this.play()
        }else {
          // 如果不是最后一首则直接播放下一首歌
          this.updatePlayListIndex(this.playListIndex + 1)
        }
      }
    }
  },
  mounted() {
    // 数据测试
    // console.log(this.musicList);
    // console.log(this.lyricList);
    // console.log(this.lyricList.lyric);
    // 页面加载时则更新歌曲总时长
    this.addDuration()
  },
  props: ["musicList","play","isbtnShow","addDuration"],
  methods:{
    // 左箭头返回主页，并调出磁盘显示
    backHome(){
      this.updatedetailShow()
      this.isLyricShow = false
    },
    // 上一首和下一首歌曲切换
    goPlay(num){
      let index = this.playListIndex + num
      if(index < 0){
        index = this.playList.length - 1
      }else if(index == this.playList.length){
        index = 0
      }
      this.updatePlayListIndex(index)
    },
    ...mapMutations(['updatedetailShow','updatePlayListIndex'])
  }
};
</script>

<style lang="less" scoped>
.bgimg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  filter: blur(70px);
}
.detailTop {
  width: 100%;
  height: 1rem;
  display: flex;
  padding: 0.2rem;
  justify-content: space-between;
  align-items: center;
  fill: #fff;
  .detailTopLeft {
    display: flex;
    align-items: center;
    .leftMarquee {
      width: 2rem;
      height: 100%;
      margin-left: 0.4rem;
      span {
        color: #fff;
      }
      .icon {
        width: 0.3rem;
        height: 0.3rem;
        fill: #fff;
      }
    }
  }
}

.detailContent {
  width: 100%;
  height: 9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  .img_needle {
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(-16deg);
    transition: all 2s;
  }

  .img_needle_active {
    width: 2rem;
    height: 3rem;
    position: absolute;
    left: 46%;
    transform-origin: 0 0;
    transform: rotate(0deg);
    transition: all 2s;
  }

  .img_cd {
    width: 5rem;
    height: 5rem;
    position: absolute;
    bottom: 2.3rem;
    z-index: -1;
  }
  .img_ar {
    width: 3.2rem;
    height: 3.2rem;
    position: absolute;
    border-radius: 50%;
    bottom: 3.14rem;
    animation: rotate_ar 10s linear infinite;
  }

  .img_ar_active {
    animation-play-state: running;
  }
  .img_ar_paused {
    animation-play-state: paused;
  }

  @keyframes rotate_ar {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
}

.musicLyric {
  width: 100%;
  height: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.2rem;
  overflow: scroll;
  p {
    // color: rgb(190, 181, 181);
    color: rgb(195, 186, 186);
    margin-bottom: 0.3rem;
  }
  .active {
    // color: #fff;
    color: red;
    font-size: 0.5rem;
  }
}

.detailFooter {
  width: 100%;
  height: 3rem;
  position: absolute;
  bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .footerTop {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .icon {
      width: 0.36rem;
      height: 0.36rem;
      fill: rgb(245, 234, 234);
    }
    .icon {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
  .range {
    width: 100%;
    height: 0.06rem;
  }
  .footer {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .icon {
      fill: rgb(245, 234, 234);
    }
    .bofang {
      width: 1rem;
      height: 1rem;
    }
  }
}
</style>